<template>
	<view class="">
		<!-- 顶部标题 -->
		<!-- <view class="head_text">
			<text>客户管理</text>
		</view> -->
		<!-- 搜索栏 -->
		<view class="search_bar">
			<view class="search_left" @click="select()">
				<image src="../../static/client/shaixuan.png" class="search_left_img"></image>
			</view>
			<input @focus="handleFoces" class="search_bar_input" v-model="searchInfo" placeholder="输入客户名称或联系人名称"
				placeholder-class="search_input_text" />
			<!-- <image src="../../static/client/sousuo.png" class="sousuo_img" @click="handleSearch"></image> -->
			<view class="all_sousuo_img" @click="handleSearch">
				<image src="../../static/client/sousuo.png"
					style="width: 38rpx;height: 34rpx;margin-top: 20rpx;margin-left: 20rpx;"></image>
			</view>
		</view>

		<!-- 筛选查询框 -->
		<view class="select_query" v-if="select_query">
			<form @submit="" @reset="">
				<!-- 日期选择器 -->
				<text class="select_query_text">创建时间</text>
				<picker mode="date" @change="bindStartDateChange" style="width:250rpx ;height: 60rpx;">
					<view class="picker_input">{{startDate}}</view>
				</picker>
				<view style="width: 15rpx;height: 3rpx; margin-left: 438rpx;margin-top: -30rpx; background: #999999;">
				</view>
				<picker mode="date" @change="bindEndDateChange" style="width:250rpx ;height: 60rpx;">
					<view class="picker_input" style="margin-left: 470rpx;margin-top: -32rpx;">{{endDate}}</view>
				</picker>
				<!-- 项目类型 -->
				<view class="select_query_text" style="margin-top: 62rpx;">项目类型</view>
				<view class="select_input" style="margin-top: -50rpx;" @click="proItemsShow()">
					<text class="select_input_text">{{project_name}}</text>
					<image src="../../static/client/xiala.png"
						style="width: 20rpx;height: 11rpx;position: absolute; right: 30rpx; top: 30rpx;">
					</image>
				</view>

				<!-- 项目类型结束 -->
				<!-- 客户性质 -->
				<view class="select_query_text" style="margin-top: 62rpx;">客户性质</view>
				<view class="select_input" style="margin-top: -50rpx;" @click="kehuInfoShow()">
					<text class="select_input_text">{{kehuInfo_name}}</text>
					<image src="../../static/client/xiala.png"
						style="width: 20rpx;height: 11rpx;position: absolute; right: 30rpx; top: 30rpx;">
					</image>
				</view>
				<!-- 客户性质结束-->
				<!-- 模糊查询 -->
				<view class="select_query_text" style="margin-top: 62rpx;">模糊查询</view>
				<input type="text" class="select_input" name="input" style="margin-top: -45rpx;"
					placeholder="请输入"
					placeholder-style="font-size: 26rpx;font-family: PingFang SC;font-weight: 500;color: #999999;" />
				<!-- 模糊查询结束 -->
				<!-- 取消确定按钮 -->
				<view style="margin-top: 65rpx;">
					<button class="query_button_cancel" @click="handelCancel" style="">取消</button>
					<button class="query_button_confirm" @click="handleSearchSlideClick" style="">确定</button>
				</view>
				<!-- 项目类型下拉列表 -->
				<view class="project_item" v-if="proItemShow">
					<view class="item_info"
						:class="search_project_type==item.project_type_id?'selectSlideItemActive':''"
						v-for="(item,index) in projectTypeList" :key='item.project_type_id' @tap="tapProItem(item)">
						<text style="margin-left: 21rpx;">{{item.project_type_name}}</text>
					</view>
				</view>
				<!-- 客户性质下拉列表 -->
				<view class="project_item" style="height: 180rpx;top: 343rpx;" v-if="kehuInfo">
					<view class="item_info" :class="search_is_company==item.id?'selectSlideItemActive':''"
						v-for="item in kehuItem_info" :key='item.id' @tap="tapKehuItem(item)">
						<text style="margin-left: 21rpx;">{{item.kehuItem}}</text>
					</view>
				</view>
			</form>
		</view>
		<!-- 筛选查询框结束 -->
		
		<view class="" style="height: 20rpx;background: #F7F7F7;"></view>
		
		<!-- 客户信息展示条目 -->
		<uni-swipe-action>
			<uni-swipe-action-item v-for="item in clientList" :key="item.id" :right-options="options"
				@click="bindClick(item.id,$event)">
				<view class="client_item" :style="item.item_style" @click="goDetails(item)">
					<text class="client_item_id">{{item.id}}</text>
					<view style="width: 1rpx; height: 120rpx;background: #EFEFEF;">
					</view>
					<view>
						<view class="client_item_name">{{item.customer_name}}</view>
						<view>
							<text class="client_item_person">{{item.member.nickname}}</text>
							<text class="client_item_phone">{{item.member.username}}</text>
						</view>
					</view>
				</view>
			</uni-swipe-action-item>
		</uni-swipe-action>
		
		<!-- 右下添加按钮 -->
		<view class="add_client">
			<image src="../../static/client/tianjia.png" style="width: 137rpx;height: 137rpx;" @click="addClient()">
			</image>
		</view>

		<!-- 加载更多 -->
		<view style="width: 100%;height: 200rpx;">
			<uni-load-more :status="status" iconType="auto" @clickLoadMore="getMoreClient"></uni-load-more>
		</view>
	</view>
</template>

<script>
	export default {

		data() {

			return {
				search_is_company: '',
				search_project_type: '',
				token: '',
				member_id: '',
				company_id: '',
				totle: '',
				clientList: '',
				searchInfo: '',
				pageNum: 0,
				status_type: 'more',
				status: 'more',
				projectTypeList: [],
				startDate: '',
				endDate: '',
				select_query: false, //控制筛选查询框是否显示
				project_name: '',
				kehuInfo_name: '全部',
				proItemShow: false, //控制项目类型选择显示
				kehuInfo: false, //控制客户性质选择显示
				client_item_change: false, //长按条目
				options: [{
					text: '转为正式客户',
					style: {
						backgroundColor: '#F4A029',
						width: 30,
					}
				}, {
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}, ],
				kehuItem_info: [{
						id: '',
						styl: '',
						kehuItem: '全部'
					},
					{
						id: '0',
						styl: '',
						kehuItem: '个人'
					},
					{
						id: '1',
						styl: '',
						kehuItem: '公司'
					}
				],

				project_items: [ //项目类型选项
					{
						styl: 'background: #40A0F2;color: #FFFFFF;border-radius: 10px 10px 0 0;',
						project_name: '双重预防',
						id: 0
					},
					{
						styl: '',
						project_name: '现状评价',
						id: 1
					},
					{
						styl: '',
						project_name: '预评价',
						id: 2
					},
					{
						styl: '',
						project_name: '验收评价',
						id: 3
					},
					{
						styl: '',
						project_name: '应急预案',
						id: 4
					}
				],

				client_items: [{
						client_id: 'c123456', // 客户id
						client_name: '河南邦泰合力管理咨询有限公司', // 客户公司名称
						client_person: '张萌萌', // 客户联系人
						client_phone: '18877778888', // 客户联系人电话
						item_style: '',
						item_change: false
					},
					{
						client_id: 'c123456', // 客户id
						client_name: '河南邦泰合力管理咨询有限公司', // 客户公司名称
						client_person: '张萌萌', // 客户联系人
						client_phone: '18877778888', // 客户联系人电话
						item_style: ''
					},
					{
						client_id: 'c123456', // 客户id
						client_name: '河南邦泰合力管理咨询有限公司', // 客户公司名称
						client_person: '张萌萌', // 客户联系人
						client_phone: '18877778888', // 客户联系人电话
						item_style: ''
					}
				],
				currentPage:1,
				pageSize:10
			}
		},
		onShow() {
			this.token = uni.getStorageSync('btlh_process_token') || ''
			this.member_id = uni.getStorageSync('btlh_process_member_id') || ''
			this.company_id = uni.getStorageSync('bthl_process_LoginCompanyId') || ''
			this.currentPage=1
			this.clientList=[]
			this.status='more'
			this.getClientList()
			this.getProjectTypeList()
			this.hidePhonenum()
		},
		async onLoad() {
			this.token = uni.getStorageSync('btlh_process_token') || ''
			this.member_id = uni.getStorageSync('btlh_process_member_id') || ''
			this.company_id = uni.getStorageSync('bthl_process_LoginCompanyId') || ''
		},
		methods: {
			// 到详情页
			goDetails(item) {
				if (item.id) {
					uni.navigateTo({
						url: `/pages/client/addClient?clientId=${item.id}`
					})
				}
			},
			handleSearch() {
				// this.pageNum = 0
			this.currentPage=1
			this.clientList=[]
			this.status='more'
				this.getClientList()
			},
			// 获取客户列表
			async getClientList() {
				const {
					data: res
				} = await this.$myRequest({
					url: 'Customer/index',
					method: 'POST',
					data: {
						member_id: this.member_id,
						token: this.token,
						company_id: this.company_id,

						date_start: this.startDate,
						date_end: this.endDate,
						search: this.searchInfo,
						project_type: this.search_project_type,
						state: this.search_is_company,
						p: this.currentPage,
						p_count: this.pageSize,
					},

				})
				if (res.code != 200) return uni.showToast({
					title: res.datas.msg,
					icon: 'none'
				})
				// this.clientList = res.datas.listInfo
				this.clientList = [...this.clientList,...res.datas.listInfo];
				this.totle = parseInt(res.datas.count)
				// if (this.totle <= this.clientList.length) {

				// 	this.status = 'noMore';
				// }
				console.log('客户列表', this.clientList)
			},
			bindClick(id, $event) {
				console.log('id', id)
				console.log($event)
				if ($event.index == 1) {
					// 点击删除
					uni.showModal({
						title: '提示',
						content: '确定删除此客户吗？',
						success: async (res) => {
							if (res.confirm) {
								// 删除
								const {
									data: res
								} = await this.$myRequest({
									url: 'Customer/del',
									method: 'POST',
									data: {
										member_id: this.member_id,
										token: this.token,
										company_id: this.company_id,
										customer_id: id,
									},

								})
								if (res.code != 200) return uni.showToast({
									title: res.datas.msg,
									icon: 'none'
								})
								uni.showToast({
									title: res.datas.msg,
									icon: 'none'
								})
								this.currentPage=1
								this.clientList=[]
								this.status='more'
								this.getClientList()
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
				}

			},
			handleFoces() {
				this.select_query = false
				this.startDate = ''
				this.endDate = ''
				this.searchInfo = ''
				this.kehuInfo_name = '全部'
				this.project_name = ''
				this.search_project_type = ''
				this.search_is_company = ''
			},
			handleSearchSlideClick() {
				// this.pageNum = 0
				this.currentPage=1
				this.clientList=[]
				this.status='more'
				this.getClientList()
				this.select_query = false
				this.startDate = ''
				this.endDate = ''
				this.searchInfo = ''
				this.kehuInfo_name = '全部'
				this.project_name = ''
				this.search_project_type = ''
				this.search_is_company = ''
				this.searchInfo = ''
			},
			handelCancel() {
				this.select_query = false
				this.startDate = ''
				this.endDate = ''
				this.searchInfo = ''
				this.kehuInfo_name = '全部'
				this.project_name = ''
				this.search_project_type = ''
				this.search_is_company = ''
				this.searchInfo = ''
			},
			// 获取项目类型
			async getProjectTypeList() {
				const {
					data: res
				} = await this.$myRequest({
					url: 'Project/project_type',
					method: 'POST',
					data: {
						member_id: this.member_id,
						token: this.token,
						company_id: this.company_id,

					},

				})
				if (res.code != 200) return uni.showToast({
					title: res.datas.msg,
					icon: 'none'
				})
				this.projectTypeList = res.datas.listInfo
				console.log('项目类型', this.projectTypeList)
			},
			/* 
			 获取更多客户信息
			 */
			getMoreClient() {
				if (this.totle > this.clientList.length) {
					this.status = 'loading';
					// this.pageNum++
					this.currentPage++
					this.getClientList(); //执行的方法
					this.status = 'more';
				} else { //停止加载
					this.status = 'noMore'
				}
			},
			/* 
			 删除条目
			 */
			deleteItem() {
				uni.showModal({
					title: '提示',
					content: '确定删除此条客户吗？'
				})
			},
			/* 
			 点击前往添加客户
			 */
			addClient() {
				uni.navigateTo({
					url: '/pages/client/addClient'
				})
			},
			/* 
			 点击客户条目
			 */
			tapClientItem(item) {
				item.item_style = ''
				item.item_change = false
			},
			/* 
			 长按客户条目
			 */
			longTapItem(item) {
				item.item_style = 'left: -180rpx;'
				item.item_change = true
			},
			/*
			 点击选择客户性质
			 */
			tapKehuItem(item) {
				this.kehuInfo_name = item.kehuItem
				this.search_is_company = item.id

				this.kehuInfo = false
			},
			/* 
			 客户性质选择是否显示
			 */
			kehuInfoShow() {
				this.kehuInfo = !this.kehuInfo
				this.proItemShow = false
			},
			/* 
			 点击选择项目类型
			 */
			tapProItem(item) {
				console.log(item)
				this.project_name = item.project_type_name
				this.search_project_type = item.project_type_id
				this.proItemShow = false

			},
			/* 
			 项目类型选择是否显示
			 */
			proItemsShow() {
				this.proItemShow = !this.proItemShow
				this.kehuInfo = false
			},
			/* 
			更改开始时间
			 */
			bindStartDateChange(e) {
				this.startDate = e.target.value
			},
			/*
			更改结束时间
			 */
			bindEndDateChange(e) {
				this.endDate = e.target.value
			},
			/* 
			 点击筛选查询按钮显示查询框
			 */
			select() {
				this.select_query = !this.select_query
			},
			/* 
			 隐藏手机号中间字符
			 */
			hidePhonenum() {
				for (let i = 0; i < this.client_items.length; i++) {
					let phone = this.client_items[i].client_phone
					this.client_items[i].client_phone = phone.slice(0, 3) + '****' + phone.slice(-4)
				}

			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
	}

	.project_item {
		width: 550rpx;
		height: 296rpx;
		background: #FFFFFF;
		box-shadow: 2rpx 3rpx 8rpx 0rpx rgba(0, 0, 0, 0.2);
		border-radius: 10px;
		position: absolute;
		top: 227rpx;
		right: 25rpx;
		z-index: 999;

		.item_info {
			width: 100%;
			height: 60rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 60rpx;
		}
	}

	.query_button_confirm {
		width: 375rpx;
		height: 80rpx;
		background: linear-gradient(0deg, #40A0F2 0%, #128BF1 100%);
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		border-radius: 0;
		margin-right: 0;
		margin-top: -80rpx;
	}

	.query_button_cancel {
		width: 385rpx;
		height: 80rpx;
		border-radius: 0px;
		margin-left: 0;
		background: #FFFFFF;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.select_input {
		width: 530rpx;
		height: 60rpx;
		background: #FFFFFF;
		border: 1rpx solid #DFDFDF;
		border-radius: 10px;
		margin-left: 170rpx;
		line-height: 60rpx;
		padding-left: 22rpx;
		position: relative;

		.select_input_text {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
		}
	}

	.picker_input {
		width: 250rpx;
		height: 60rpx;
		background: #FFFFFF;
		border: 1px solid #DFDFDF;
		border-radius: 10rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 60rpx;
		text-align: center;
		margin-left: 170rpx;
		margin-top: -48rpx;
	}

	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
	}

	.item {
		height: 50px;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.select_query {
		width: 100%;
		height: auto;
		background: #FFF;
		position: absolute;
		// top: 225rpx;
		padding-top: 56rpx;
		box-shadow: 1px 3px 15px 0px rgba(3, 70, 126, 0.2);

		.select_query_text {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			margin-left: 30rpx;
		}
	}

	.add_client {
		width: 137rpx;
		height: 137rpx;
		position: fixed;
		left: 592rpx;
		bottom: 120rpx;
		z-index: 5;
	}

	.client_item {
		width: 100%;
		height: 140rpx;
		border-bottom: 5rpx solid #F7F7F7;
		display: flex;
		align-items: center;

		.client_item_id {
			width: 180rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #128BF1;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.client_item_name {
			margin-left: 20rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}

		.client_item_person {
			margin-left: 20rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #128BF1;
		}

		.client_item_phone {
			margin-left: 20rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;

		}
	}

	.search_left_img {
		width: 46rpx;
		height: 36rpx;
		padding: 28rpx 30rpx;
	}

	.search_left {
		width: 106rpx;
		height: 92rpx;
		background: #40A0F2;
	}

	.search_bar {
		width: 100%;
		height: 92rpx;
		position: relative;
		// border-bottom: 20rpx solid #F7F7F7;

		.search_bar_input {
			width: 450rpx;
			height: 72rpx;
			background: #F7F7F7;
			border: 1rpx solid #F7F7F7;
			border-radius: 36rpx 0 0 36rpx;
			margin-left: 136rpx;
			position: absolute;
			top: 10rpx;
			padding-left: 20rpx;
			.search_input_text {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #B2B2B2;
				line-height: 37px;
				margin-left: 31rpx;
			}
		}

		.sousuo_img {
			width: 38rpx;
			height: 34rpx;
			position: absolute;
			top: 28rpx;
			left: 650rpx;
			z-index: 99;
		}
	}

	.head_text {
		width: 100%;
		height: 128rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 128rpx;
		text-align: center;
		border: 1rpx solid #F7F7F7;

	}

	.selectSlideItemActive {
		background: #40A0F2;
		color: #FFFFFF;
		border-radius: 10px 10px 0 0;
	}
</style>
